<template>
  <div class="zhuti">
    <div class="box">
      <div class="boxInput">
        <div class="rig">
          <div>商品名称：</div>
          <div>
            <el-input v-model="input" placeholder="请输入商品名称" />
          </div>
          <el-button class="sou" :loading="load" @click="shuSuu"
            >搜索</el-button
          >
        </div>
      </div>
    </div>
    <div class="buttom">
      <div class="header">
        <div class="left">分类有子类或分类有商品不可删除</div>
        <div class="rig" @click="xinZeng">
          <div>
            <el-icon class="tubiao"><CirclePlusFilled /></el-icon>
          </div>
          <span>新增</span>
        </div>
      </div>
      <div class="Tab">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="55vh"
          :header-cell-style="{ background: '#f5f5f5' }"
          v-loading="loading"
        >
          <el-table-column type="expand">
            <template #default="props">
              <!-- 二级菜单 -->
              <el-table
                :data="props.row.commodityList[0].detailsList"
                :show-header="false"
              >
                <el-table-column
                  type="expand"
                  style="padding: 10px"
                ></el-table-column>
                <el-table-column
                  prop="info"
                  label="商品"
                  min-width="120"
                  class="TableC"
                />
                <el-table-column prop="info" label="商品" min-width="120" />
                <el-table-column prop="info" label="商品评分" min-width="120" />
                <el-table-column prop="info" label="评价内容" min-width="300" />
                <el-table-column prop="info" label="评价图片" min-width="120" />
                <el-table-column prop="info" label="状态" min-width="120" />
                <el-table-column prop="info" label="评价时间" min-width="120" />
                <el-table-column label="操作" min-width="60">
                  <template #default="pros">
                    <div class="bbox">
                      <el-tooltip content="编辑" placement="top">
                        <div class="reply" @click="huifu1(pros)">
                          <el-icon><EditPen /></el-icon>
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column
            prop="totalName"
            label="商品"
            min-width="120"
            class="TableC"
          />
          <el-table-column prop="totalName" label="商品" min-width="120" />
          <el-table-column prop="totalName" label="商品评分" min-width="120" />
          <el-table-column prop="totalName" label="评价内容" min-width="300" />
          <el-table-column prop="totalName" label="评价图片" min-width="120" />
          <el-table-column prop="totalName" label="状态" min-width="120" />
          <el-table-column prop="totalName" label="评价时间" min-width="120" />
          <el-table-column label="操作" min-width="60">
            <template #default="ppp">
              <div class="bbox">
                <el-tooltip content="编辑" placement="top" class="com">
                  <div class="reply" @click="huifu(ppp)">
                    <el-icon><EditPen /></el-icon>
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <chouti ref="BianJi" title="编辑分类" size="30%">
    <div class="xiugai">
      <div>上级：</div>
      <div class="elinp">
        <el-input v-model="xiugia" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>名称：</div>
      <div class="elinp">
        <el-input v-model="xiugiaMingc" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>排序：</div>
      <div class="elinp">
        <el-input v-model="xiugiaPaixu" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>图片：</div>
      <div class="elinp">
        <el-input v-model="xiugiaPaixu" placeholder="请输入" />
      </div>
    </div>
    <div class="wei">
      <el-button type="success" :plain="true" @click="open1(p)"
        >确定<el-icon><Check /></el-icon
      ></el-button>
      <el-button type="danger" @click="quxiao"
        >取消<el-icon><CloseBold /></el-icon
      ></el-button>
    </div>
  </chouti>
</template>

<script setup>
import Chouti from "../../components/chouti.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { proList, proSave, proUpda } from "./ApiClass";
const load = ref(false);
const loading = ref(true);
const input = ref("");
const xiugia = ref("");
let xiugiaMingc = ref(``);
const xiugiaPaixu = ref(1);
const BianJi = ref(null);
const id = ref(0);
let p = ref(0);
const tableData = ref([]);
// 列表接口
prList();
function prList(p = "") {
  proList(p).then((res) => {
    tableData.value = res.data.data.items;
    loading.value = false;
  });
}

// 一级菜单修改
const huifu = (item) => {
  // console.log(item.row.id);
  BianJi.value.open();
  p.value = 1;
  id.value = item.row.id;
};
// 二级菜单修改
const huifu1 = (item) => {
  BianJi.value.open();
  p.value = 2;
};
// 新增
const xinZeng = () => {
  BianJi.value.open();
  p.value = 3;
};
// 取消
const quxiao = () => {
  BianJi.value.close();
};
// 确定
const open1 = (p) => {
  if (!xiugiaMingc.value) {
    ElMessage({
      message: "提交失败",
      type: "error",
    });
  } else {
    ElMessage({
      message: "提交成功",
      type: "success",
    });
    if (p == 1) {
      // 修改
      proUpda(id.value, xiugiaMingc.value).then(() => {
        prList();
      });
    } else if (p == 2) {
    } else if (p == 3) {
      // 新增
      proSave(xiugiaMingc.value).then(() => {
        prList();
      });
    }
    BianJi.value.close();
  }
};
// 搜索
function shuSuu() {
  load.value = true;
  prList(input.value);
  load.value = false;
}
</script>

<style scoped>
.com {
  background-color: #ff6a6c;
}
.zhuti {
  background-color: #f5f5f5;
}
.box {
  display: flex;
  justify-content: space-between;
}

.boxInput > .rig {
  line-height: 40px;
  height: 40px;
  display: flex;
  border-radius: 5px;
  font-size: 14px;
}
.boxInput {
  width: 100%;

  margin-top: 10px;
  /* height: 76px; */
  padding: 15px 10px;
  border-radius: 10px;
  background-color: white;
}
.sou {
  margin-top: 7px;
  width: 70px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  background-color: #ff6a6c;
  text-align: center;
  border-radius: 5px;
  margin-left: 10px;
  color: white;
}
.left > p > span {
  background-color: #ff6a6c;
  border-radius: 100px;
  padding: 2px 5px;
  font-size: 10px;
}
.buttom {
  padding: 2px;
  border-radius: 10px;
  color: white;
  margin-top: 30px;
  background-color: white;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header > div {
  padding: 5px 0px;
  width: 80px;
  text-align: center;
  border-radius: 5px;
}
.header > .left {
  width: 200px;
  color: gray;
  font-size: 10px;
}
.header > .rig {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #ffa66a;
}
.header > .rig > div {
  font-size: 20px;
  margin-right: 3px;
}
.reply {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  border: 1px #a9acb1 solid;
}
.reply:hover {
  background-color: #ff6a6c;
  color: white;
}
.bbox {
  padding: 30px 0;
}
.xiugai {
  display: flex;
  margin-bottom: 20px;
}
.elinp {
  width: 80%;
}
.wei {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 10px;
}
</style>
